一覧に戻る

MapLibre Nativeを使ってNode.jsで地図をレンダリングする

#C++#Node.js#TypeScript#MapLibre

MapLibre User Group Japanの@Kanahiroです。今回はMapLibre Nativeを紹介します。

TL;DR

  • MapLibre NativeとNode.jsでStyle Specificationをレンダリング
  • ラスタータイルをレンダリングできたりした
  • MapLibre Nativeのドキュメントはショボいのびしろがある
  • そんなわけで依存関係がわかりにくくてDockerfileも作りにくかった

MapLibre Native

https://github.com/maplibre/maplibre-native

C++で書かれたMapLibre Style Specificationのレンダラーです。iOS/Android向けのSDKが最もポピュラーですが、そのほかNode.jsやQt向けのビルドがあったりします。

iOS向けのquick startには以下の記事が易しいです。

https://qiita.com/kyotonagoya/items/6b9ca9fca2f659665050

本記事では、あえてNode.jsでNativeを動かしてみます。

Node.jsでタイルサーバーを書いてみたい！

MapLibre NativeのタイルサーバーといえばTileServerGLが有名ですが、機能がちょっと多過ぎて・遅かったりして、「すっごくシンプルなタイルサーバーが欲しい」と思って実装してみました。

https://github.com/Kanahiro/chiitiler

ひらがなでは「ちいたいらー」と読みます。今流行りのアレとは関係ありません。

ただひたすら「Style Specificationのレンダリング」をするためのサーバーです。ここまで薄く書いておくとコンテナランタイムに乗せて動かしたりしやすいですね。ちなみにまだ若干、描画がおかしいことがあります。バグってる…ってコト！？

使い方

Node.jsでの動かし方はドキュメントで書いてありますが、コンテナイメージも配布しているので、下記のように動かすのが簡単だと思います。

docker pull ghcr.io/kanahiro/chiitiler
CHIITILER_DEBUG=true docker run -p 3000:3000 ghcr.io/kanahiro/chiitiler

http://localhost:3000/debug で以下のような地図が表示されるでしょう。裏側ではdemotilesを見に行って、タイルをレンダリングしていたりします。いい感じにキャッシュしたりするオプションがあったりなかったりするのでドキュメントを見てみてください。コンテナランタイムに乗せたかったので、環境変数でコントロール出来るようにしています。

また、http://localhost:3000/debug?url=https://tile.openstreetmap.jp/styles/osm-bright/style.json のようなURLでアクセスすると、指定したstyle.jsonをレンダリングしようとします。demotilesより重たくなっていくことに留意。

所感

  • Lambdaで動かして遊んでみたが、ラスタライズの処理は本質的に重たい処理なので、いくら並列処理出来ても遅いものは遅い。キャッシュは必須
  • Node.jsでの動かし方も、Dockerfileも、ドキュメントがしょぼくて辛かった（コントリビュートチャンス）